import React from 'react';
import cart from '../../assets/css/home/cart.module.css'
import {Link} from "react-router-dom";
import {connect} from "react-redux";

class TransferIndex extends React.Component{
    constructor(){
        super();
        this.state={
            txtList:[],
            all:true,
            totalPrice:0.00
        }
    }
    componentWillMount() {
        let details = localStorage.goods;
        if (details){
            this.setState({txtList:JSON.parse(details)},()=>{
                this.total();
                let check = this.state.txtList.every(item=>{
                    return item.check
                });
                this.setState({all:check});
            })
        }
        this.full();
    }
    // 反选
    show(index){
        let list=this.state.txtList;
        list[index].check = !list[index].check;
        this.setState({txtList:list},()=>{
            // console.log(JSON.stringify(this.state.txtList))
        });
        let check = list.every(item=>{
            return item.check
        });
        this.setState({all:check});
        localStorage['goods']=JSON.stringify(list);
        this.total();
    }
    // 全选
    all(){
        let list=this.state.txtList;
        if (this.state.all) {
            if (list.length>0){
                for (let i=0;i<list.length;i++){
                    list[i].check=false;
                }
            }
            this.setState({all:false})
        }else {
            if (list.length>0){
                for (let i=0;i<list.length;i++){
                    list[i].check=true;
                }
            }
            this.setState({all:true});
        }
        this.setState({txtList:list},()=>{
            // console.log(this.state.txtList)
        });
        localStorage['goods']=JSON.stringify(list);
        this.total();
    }
    // 减
    reduce(index){
        let list=this.state.txtList[index];
        if(list.amount === 1){
            return false
        }else {
            list.amount--;
            this.setState({txtList:this.state.txtList});
        }
        localStorage['goods']=JSON.stringify(this.state.txtList);
        this.total();
    }
    // 加
    plus(index){
        let list=this.state.txtList[index];
        list.amount++;
        this.setState({txtList:this.state.txtList});
        localStorage['goods']=JSON.stringify(this.state.txtList);
        this.total();
    }
    // 合计
    total(){
        let list=this.state.txtList;
        let total=0;
        for (let i=0;i<list.length;i++){
            if(list[i].check === true){
                total+=list[i].price*list[i].amount;
            }
        }
        this.setState({totalPrice:total.toFixed(2)});
    }
    // 删除
    delete(index){
        let list=this.state.txtList;
        for (let i=0;i<list.length;i++){
            if(i===index){
                list.splice(i,1);
            }
        }
        this.setState({txtList:list});
        localStorage['goods']=JSON.stringify(list);
        this.total();
        if (list.length===0){
            localStorage.removeItem('goods');
            this.full();
        }
        if (localStorage.goods){
            this.props.dispatch({type:'cart',amount:true})
        } else {
            this.props.dispatch({type:'cart',amount:false})
        }
    }
    btn(){
        let list=this.state.txtList;
        let goodOne = [];
        for (let i=0;i<list.length;i++){
            if (list[i].check === true){
                goodOne.push(list[i])
            }
        }
        localStorage['goodOne']=JSON.stringify(goodOne);
    }
    full(){
        if (localStorage.goods){
            this.setState({all:true})
        } else {
            this.setState({all:false})
        }
    }

    render() {
        return(
            <div className={cart.boxCart}>
                <h2>购物车</h2>
                <ul className={cart.boxActive}>
                    {this.state.txtList.map((item,index)=>{
                        return(
                            <li key={index}>
                                <div className={cart.boxCir} style={{display:!item.check?'block':'none'}} onClick={this.show.bind(this,index)}> </div>
                                <img src={require('../../assets/images/home/cart/checkmark.png')} alt="" style={{display:item.check?'block':'none'}} onClick={this.show.bind(this,index)} className={cart.checkmark}/>
                                <div>
                                    <img src={item.images[0]} alt=''/>
                                    <span onClick={this.delete.bind(this,index)}>删除</span>
                                </div>
                                <div style={{width:"100%"}}>
                                    <p className={cart.boxConten}>{item.title}</p>
                                    {item.size.map((Item,Index)=>{
                                        return(
                                           <div key={Index} className={cart.boxValue}>
                                               {Item !== null?<span>{Item.value}</span>:''}
                                           </div>
                                        )
                                    })}
                                    <div className={cart.boxSpan}>
                                        <span>￥{item.price}</span>
                                        <p>
                                            <button onClick={this.reduce.bind(this,index)}>-</button>
                                            <span>{item.amount}</span >
                                            <button onClick={this.plus.bind(this,index)}>+</button>
                                        </p>
                                    </div>
                                </div>
                            </li>
                        )
                    })}
                </ul>
                <div className={cart.boxFoot}>
                    <p>
                        <span className={cart.boxCirOne} style={{display:!this.state.all?'block':'none'}} onClick={this.all.bind(this)}> </span>
                        <img className={cart.checkmarkOne} src={require('../../assets/images/home/cart/checkmark.png')} alt="" style={{display:this.state.all?'block':'none'}} onClick={this.all.bind(this)}/>
                        全选
                    </p>
                    <p>
                        运费：<span>免运费</span>
                        合计：<span>￥{this.state.totalPrice}</span>
                        <Link to="/order/index">
                            <button onClick={this.btn.bind(this)} disabled={localStorage.goods&&JSON.parse(localStorage.goods).some((item)=>{
                                return item.check===true
                            })?false:true}>去结算</button>
                        </Link>
                    </p>
                </div>
            </div>
        )
    }
}

export default connect((state)=>{
    return{
        state:state
    }
})(TransferIndex)